<template>
    <div class="first_level_page">
        <div id='head_top'>
            <!-- <slot name='search'></slot> -->
            <section class="head_left left">
                <div class="head_location left">
                    <img src="../../images/location.png">
                </div>
                {{this.warehouse.warehouseCode}}
            </section>
            <section class="head_right right">
                <div class="head_search">
                    <img src="../../images/searchIcon.png">
                </div>
                <div class="head_add" @click="search">
                    <svg viewBox="0 0 23 23" >
                        <line x1="0" y1="11.5" x2="23" y2="11.5"
                        style="stroke:rgb(255,255,255);stroke-width:2"/>
                        <line x1="11.5" y1="0" x2="11.5" y2="23"
                        style="stroke:rgb(255,255,255);stroke-width:2"/>
                    </svg>
                </div>
            </section>
        </div>
        <div :class="index==0?'customer_main marginTop':'customer_main'" v-for="(item,index) in connectMember">
              <div class="customer_demo" @click="getDetail(item)">
                <div class="customer_left left">
                  <img :src="getUrl(item)">
                </div>
                <div class="customer_right right">
                  <div class="customer_name ellipsis">
                    {{item.businessName}}
                  </div>
                  <div class="customer_time">
                    <img src="../../images/time.png">
                    9:00-22:00
                    <div class="right customer_distance">{{item.deliveryRadius}}m</div>
                  </div>
                  <div class="customer_promotion ellipsis">
                    双十一福利大放送，当天有菜单爱仕达
                  </div>
                </div>
                <div class="clear"></div>
              </div>
        </div>
        <div class="heightBottom"></div>

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>

        <foot-guide></foot-guide>
    </div>
</template>

<script>
    import footGuide from 'src/components/footer/footGuide'
    import {mapState} from 'vuex'
    import {getWarehouse,getConnectMember} from 'src/service/member.js'

    export default {
        data(){
            return {
              warehouse: {},
              connectMember: [],
            }
        },
        created(){
          this.getWarehouse();
          this.getConnectMember();
        },
        mounted(){

        },
      watch: {
          '$route.query.flush'(newValue) {
            if (newValue) {
              this.getConnectMember();
            }
          }
      },
        components: {
            footGuide,
        },
        computed: {
        ...mapState([
            'userInfo',
        ]),
    },
        methods: {
            search(){
            this.$router.push({path: '/customer/customerSearch', query: {name: this.warehouse.warehouseCode}});
            },
          getDetail(item) {
            console.log(item);
            this.$router.push({path: '/customer/customerDetail', query: {member: item}})
          },
            getWarehouse() {
              console.log("sss")
              getWarehouse().then(response => {
                this.warehouse = response.data;
              })
            },
            getConnectMember() {
              getConnectMember().then(response => {
                this.connectMember = response.data;
              })
            },
          getUrl(item) {
              return item.backImg;
          }
        },
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';
    #head_top{
        clear: both;
        background-color: $blue;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        @include wh(100%, .88rem);
    }
    .head_left{
        @include sc(.34rem, #fff);
        line-height: .88rem;
        .head_location{
            font-size: 0;
            display: inline-block;
            @include wh(.74rem, .88rem);
            img{
                @include wh(100%, 100%);
            }
        }
    }
    .head_right{
        font-size: 0;
        .head_search{
            display: inline-block;
            @include wh(.74rem, .88rem);
            img{
                margin: .26rem .19rem;
                @include wh(.36rem, .36rem);
            }
        }
        .head_add{
            display: inline-block;
            @include wh(.74rem, .88rem);
            svg{
                margin: .26rem .19rem .26rem .13rem;
                @include wh(.36rem, .36rem);
            }
        }
    }
    .customer_main{
        padding-top: .14rem;
        .customer_demo{
            display: block;
            @include wh(100%, 1.98rem);
            background: #fff;
            border-bottom: .01rem solid #e3e3e3;
            .customer_left{
                @include wh(1.9rem, 1.98rem);
                img{
                    margin: .24rem .2rem;
                    @include wh(1.5rem, 1.5rem);
                }
            }
            .customer_right{
                @include wh(5.6rem, 1.98rem);
                padding-right: .2rem;
                .customer_name{
                    @include sc(.3rem, #333);
                    height: .3rem;
                    line-height: .3rem;
                    margin: .32rem 0 .16rem;
                }
                .customer_time{
                    @include sc(.28rem, #999);
                    height: .32rem;
                    line-height: .32rem;
                    img{
                        float: left;
                        margin-right: .1rem;
                        @include wh(.32rem, .32rem);
                        vertical-align: middle;
                    }
                    .customer_distance{
                        @include sc(.28rem, #999);
                    }
                }
                .customer_promotion{
                    @include sc(.24rem, #999);
                    height: .24rem;
                    line-height: .24rem;
                    margin-top: .36rem;
                }
            }
        }
    }
</style>
